// 定义 props 的类型
import {FC} from "react";
import {blue, green, grey, red} from "@mui/material/colors";
import {Avatar, AvatarProps} from "@mui/material";

// 接口限制
interface DGAvatarProps extends AvatarProps {
    bgRed?: boolean;
    bgGreen?: boolean;
    bgBlue?: boolean;
    bgGrey?: boolean;
    bgBlack?: boolean;
    bgWhite?: boolean;
    square?: boolean;
    rounded?: boolean;
    small?: boolean;
    middle?: boolean;
}

const DGAvatar: FC<DGAvatarProps> = (props) => {
    // 解析参数
    const {
        bgRed, bgGreen, bgBlue, bgGrey, bgBlack, bgWhite, square, rounded, small, middle, ...other
    } = props;

    // 解析颜色
    const getColor = () => {
        if (bgRed) return red[500];
        if (bgGreen) return green[500];
        if (bgBlue) return blue[500];
        if (bgGrey) return grey[500];
        if (bgBlack) return "black";
        if (bgWhite) return "#EDEDED";
        return "transparent";
    }

    // 解析大小
    const getSize = () => {
        // 小
        if (small) return "24px";
        // 中
        if (middle) return "35px";
        return "none";
    }

    // 样式
    const style = {
        width: getSize(), height: getSize(), backgroundColor: getColor(),
    }

    return (<>
        {/* 默认头像组件 */}
        {!square && !rounded && <Avatar style={style} {...other}/>}
        {/* 方形头像组件 */}
        {square && <Avatar variant="square" style={style} {...other}/>}
        {/* 圆角头像组件 */}
        {rounded && <Avatar variant="rounded" style={style} {...other}/>}
    </>);
}
export default DGAvatar;